To Do List

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-10-29 09:55:02

1528 瀏覽

分享至

菜菜菜的 Vue 30天 - Day14

好的，過這幾章我們又多學了幾個語法，今天這章再來做一個實作吧～

To Do List

今天要實作的項目待辦事項清單(To Do List)，今天我們實作一個簡單版的，大致上我們的需求如下：

有一個輸入框能夠讓使用者輸入待辦事項
有一個按鈕能夠讓使用者新增待辦事項
有一個列表能夠顯示待辦事項
代辦事項內有一個能夠刪除該事項的按鈕

我們這次的需求就是最簡單的上面 4 項。

輸入

我想輸入這個對各位應該是非常熟悉了，來看一下程式碼吧：

我們建立一個 input 並且使用 v-model 雙向綁定到 data 上的 newToDo。

<body>
  <div id="app">
    <input type="text" v-model="newTodo">
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      newTodo: '',
    },
  })
</script>

新增

好的，我們有了一個可以輸入的地方之後接下來就是要可以把輸入欄裡面的內容新增囉，這部分我們要做 2 件事情：

在 data 裡宣告一個 todos 的空陣列。
建立一個 methods 讓輸入欄的資料新增進 todos 的陣列裡，並且綁定到一個新增的按鈕上。

至於要怎麼將輸入欄的資料新增進去 todos 的陣列裡面呢？！

就使用 push 吧，這是原生 JS 的語法，能夠將資料插入陣列的最後面。

<body>
  <div id="app">
    <input type="text" v-model="newTodo">
    <button @click="addToDo">Add</button>
    {{newTodo}} => {{todos}}   //只是為了看效果的
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      newTodo: '',
      todos: []
    },
    methods: {
      addToDo() {
        this.todos.push(this.newTodo);
        this.newTodo = '';    //將輸入欄清空
      }
    }
  })
</script>

渲染

我們能夠將輸入欄新增進去陣列之後，接下來就是將這個待辦事項清單渲染出來囉～

這部分我們就使用前一章介紹的 v-for 來處理吧。

下面我們就建立一個 ul以及li，然後對 li 做 v-for 渲染

<body>
  <div id="app">
    <input type="text" v-model="newTodo">
    <button @click="addToDo">Add</button>
    <ul>
      <li v-for="todo in todos">{{todo}}</li>
    </ul>
  </div>
</body>

刪除

我們終於到最後一個功能啦～

我們要實作刪除的功能，首先當然是先建立一個刪除鈕在每個 todo 裡

接下來我們要在按鈕上綁定一個事件去刪除 todo，但是要怎麼刪除呢？！

我們就使用 splice 做刪除吧。

splice 會帶 3 個參數 splice(start, deleteCount, items)

start: 從陣列的哪個位置開始
deleteCount: 從開始的位置要刪除的數量
items: 刪除後要置入的資料(可為空)

所以我們要刪除當下的 todo 就給它前 2 個參數，start 傳入的就是當下的 index，deleteCount 就給 1 吧，因為我們只要刪除一個。

<body>
  <div id="app">
    <input type="text" v-model="newTodo">
    <button @click="addToDo">Add</button>
    <ul>
      <li v-for="(todo, index) in todos">{{todo}}
        <button @click="removeToDo(index)">Remove</button>
      </li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      newTodo: '',
      todos: []
    },
    methods: {
      addToDo() {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      },
      removeToDo(index) {
        this.todos.splice(index, 1)
      }
    }
  })
</script>

最終的結果就是這樣啦：